<template>
    <view>
        <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
                        <swiper-item v-for="(img, index) in bannerImgs" :key="index">
                            <image mode="aspectFill" style="width: 100%; height: 100%;" :src="img.img"></image>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
        <scroll-view scroll-x class="bg-white nav">
            <view class="flex text-center">
                <view class="cu-item flex-sub text-orange cur" v-for="(item,index) in ticket" :key="index" :data-id="index">
                    <view class="flex">
                        <view class="flex-sub"></view>
                        <view class="flex-sub">{{item.name}}</view>
                        <view class="flex-sub flex align-center justify-center">
                            <view v-if="item.isPromotion" class="cu-tag tag round sm bg-gradual-orange">{{item.promotionContent}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <view class="cu-bar bg-white flex justify-between align-center">
            <view class="padding-lr" :class="animation?'animation-slide-right' :''">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">{{array[index]}}</view>
				</picker>
            </view>
            <img style="width: 28px" mode="widthFix" src="/static/exchange.svg" @tap="toggle()"/>
            <view class="padding-lr" :class="animation?'animation-slide-left' :''">
               <picker @change="bindPickerChange1" :value="index1" :range="array1">
               	 <view class="uni-input">{{array1[index1]}}</view>
               </picker>
            </view>
        </view>

        <!--<view class="cu-modal bottom-modal" :class="modalName=='startModal'?'show':''" @tap="hideModal">-->
            <!--<view class="cu-dialog" @tap.stop="">-->

            <!--</view>-->
        <!--</view>-->

        <view class="cu-modal drawer-modal justify-end" :class="modalName=='startModal'?'show':''" @tap="hideModal">
            <view class="cu-dialog width100" @click.stop="">
                <indexes @guanbi = "guanbi"></indexes>
            </view>
        </view>


        <view class="cu-form-group top-line">
            <picker mode="date" :value="date" :start="strat" end="2025-09-01" @change="DateChange" style="padding-right: 0px">
                <view style="display: flex; justify-content: space-between;">
                    <view>
						{{date}}
                       <!-- 4 月 28 日 <text class="text-gray text-sm" style="margin-left: 8px">周日</text> -->
                    </view>
                    <view class="cuIcon-right"></view>
                </view>
            </picker>
        </view>
        <view class="bg-white padding top-line">
            <button class="cu-btn bg-gradual-orange lg" style="width: 100%;" @click="goSearchList()">开始搜索</button>
           
        </view>
		<!--筛选模态框-->
		
    </view>
</template>

<script>
    import StartEndPoint from './components/StartEndPoint'
    import Indexes from '../../pages/common/indexes'
    export default {
        name: 'home',
        components: {StartEndPoint, Indexes},
        data() {
            return {
                indicatorDots: true,
                autoplay: true,
                interval: 2000,
                duration: 500,
                bannerImgs: [ ],
                ticket: [
                    {
                        name: '汽车票',
                        isPromotion: true,
                        promotionContent: ''
                    }
                ],
                scrollLeft: 0,
                date: '2018-12-25',
                modalName: '',
				start:'',
				end:'',
				cityList:[],
				animation: false,
				array:[],
				index:0,
				array1:[],
				index1:0,
			}
        },
		created() {
			this.getbanner()
			this.getCity()
			var now = new Date();
			var year = now.getFullYear(); //获取完整的年份(4位,1970-????)
			var month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
			var day = now.getDate(); //获取当前日(1-31)
			var timeStr = year + "-" + (month<10?"0"+month:month) + "-" + (day<10?"0"+day:day) ;
			this.strat = timeStr
			this.date = timeStr
		},
		computed: {
		    // 计算筛选的高度
		    condHeight() {
		        if (!this.conds || this.conds.length < 1) {
		            return 55
		        }
		        let height = 0
		        this.conds.forEach(cond => {
		            height = (cond.item.length * 55) > height ? (cond.item.length * 55) : height
		        })
		        return height + 55
		    }
		},
        methods: {
			bindPickerChange(e){
				 this.index = e.detail.value
			},
			bindPickerChange1(e){
				 this.index1 = e.detail.value
			},
            DateChange(e) {
                this.date = e.detail.value
				console.log(this.date)
            },
            goSearchList() {
                uni.navigateTo({
                    url: "../home/searchlist/SearchList?start="+this.array[this.index]+"&end="+this.array1[this.index1]+"&time="+this.date
                })
            },
			toggle() {
			    this.animation= true;
			    setTimeout(()=>{
			        this.animation = false;
			    }, 1000)
				let index = null
				index = this.index
			    this.index = this.index1;
			    this.index1 = index;
			},
            startClick() {
                // uni.navigateTo({url: '/pages/common/indexes'})
                // this.showModal('startModal')
				this.modalName = "filterModal"
				console.log(1)
            },
            endClick() {
                console.log("5")
            },
			guanbi(e){
				console.log(e)
				this.modalName = null
			},
            // 隐藏modal
            hideModal(e) {
                this.modalName = null
            },
            // 显示某个modal
            showModal(modalName) {
                this.modalName = modalName
            },
			getbanner(){
				let that = this
				that.tui.request("api.ticket/banner", "POST", {}, false, false, false).then((res) => {
					console.log(res)
					if(res.code==1){
						that.bannerImgs =res.data.list
					}
				}).catch((res) => {
					
				})
			},
			getCity(){
				let that = this
				that.tui.request("api.ticket/ticket", "POST", {}, false, false, false).then((res) => {
					if(res.code==1){
						that.cityList = res.data.list
						res.data.list.map((item,index)=>{
							that.array.push(item.name)
							that.array1.push(item.name)
						})
					}
				}).catch((res) => {
					
				})
			},
        }
    }
</script>

<style>
    .tag {
        border-top-right-radius: 0px
    }
</style>
